import { useParams } from "react-router-dom";
import ChatGroup from "./components/ChatGroup";
import { useEffect, useState } from "react";
import { client } from "../../api/appsync";

interface Room {
  id: string;
  name: string;
}

export default function ChatGroupPage() {
  const { roomId } = useParams<{ roomId: string }>();
  const [room, setRoom] = useState<Room | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchRoom = async () => {
      try {
        /*
        const { data } = await client.graphql({
          query: `query GetRoom($id: ID!) {
            getRoom(id: $id) {
              id
              name
            }
          }`,
          variables: { id: roomId },
        });
        */
        setRoom({
          id: roomId ?? "blank",
          name: `romm-${roomId}`,
        });
      } catch (error) {
        console.error("Error fetching room:", error);
      } finally {
        setLoading(false);
      }
    };

    if (roomId) fetchRoom();
  }, [roomId]);

  if (loading) return <div>Loading...</div>;
  if (!room) return <div>Room not found</div>;

  return <ChatGroup roomId={room.id} roomName={room.name} />;
}
